<template>
    <div class="flex h-full">
        <div class="flex-1 pl-3.8rem pt-3.4rem">
            <div class="text-2.8rem">智能底盘</div>
            <div class="text-1.8rem mt-2.8rem">悬架舒适度</div>
            <Switch :menus="mode" class=" mt-1.9rem" @change="changeSuspensionComfort"></Switch>
            <div class="text-1.8rem mt-2.8rem">转向模式</div>
            <Switch :menus="mode" class=" mt-1.9rem" @change="changeSteeringMode"></Switch>
            <div class="text-1.8rem mt-2.8rem">能量回收</div>
            <Switch :menus="energyRecovery" class=" mt-1.9rem" @change="changeEnergyRecovery"></Switch>
        </div>
        <div class="flex-1 h-full items-center justify-center pt-30rem pl-5rem">
            <SvgIcon class="w-47rem h-43rem" local-icon="setting-car" />
        </div>
    </div>
</template>

<script setup lang="ts">
import Switch from './switch.vue'
import { eventSetting, SettingAction, SettingSwitchEventID, SettingWidget } from '@/hooks/business/eventListen/settingEventListen'

const mode = [
    { "name": "舒适", "key": "comfort" },
    { "name": "标准", "key": "standard" },
    { "name": "运动", "key": "sport" }
]
const energyRecovery = [
    { name: "舒适", key: "comfort" },
    { name: "标准", key: "standard" },
    { name: "强", key: "strong" }
];

function changeSuspensionComfort(val: string) {
    eventSetting(SettingAction.Click, SettingWidget.SettingSwitch, SettingSwitchEventID.SuspensionComfort, val)
}
function changeSteeringMode(val: string) {
    eventSetting(SettingAction.Click, SettingWidget.SettingSwitch, SettingSwitchEventID.SteeringMode, val)
}
function changeEnergyRecovery(val: string) {
    eventSetting(SettingAction.Click, SettingWidget.SettingSwitch, SettingSwitchEventID.EnergyRecovery, val)
}
</script>
